import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import moment from "moment";
import { Row, Col, Table, Spin, Card, Drawer } from "antd";
import Map from "./Map";
import d1 from '../../../assets/img/d1.svg';


@connect()
export default class PathCuring extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: [],
      mapVisible: false,
      locationData: [],
    };
  }

  componentDidMount() {

  }

  componentWillUnmount(){
    const { dispatch } = this.props;
    dispatch({
      type: `path/fetch_curing_clear`,
    })
  }

  componentWillReceiveProps(nextProps) {
    // 外层发起刷新数据请求
    if (nextProps.doDel === true && this.props.doDel === false) {
      this.setState({
        selectedRows:[]
      },()=>{
        this.props.refreshStop();
      })
    }
  }



  // 表格复选框选中
  handleSelectRows = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRows: selectedRows,
    },()=>{
      this.props.selectCallBack(selectedRows);
    });
  };


  // 显示地图
  handleShowMap (value){
    this.setState({
      locationData:[value],
      mapVisible: true,
    });
  }

  handleHideMap = () => {
    this.setState({
      mapVisible: false,
    });
  };


  render() {
    const { tableData,loading, onlyview, dictionaries } = this.props;
    const { selectedRows, mapVisible, locationData } = this.state;

    const rowSelection = {
      selectedRowKeys:selectedRows.map(item=>item.devId),
      onChange: this.handleSelectRows,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    let columns;

    columns = [{
      title: '序号',
      width: 50,
      dataIndex: 'index',
      render: (text, row, index)=> (
        <span>{index+1}</span>
      ),
    }, {
      title: '设备编号',
      width: 150,
      dataIndex: 'devCode',
    }, {
      title: '设备名称',
      width: 150,
      dataIndex: 'devName',
    }, {
      title: '区域',
      width: 150,
      dataIndex: 'districtName',
    },{
      title: '点位',
      width: 200,
      dataIndex: 'pointName',
    }];

    if(dictionaries){
      const taskStatus = dictionaries.taskStatus && dictionaries.taskStatus.length>1
        ? dictionaries.taskStatus.map(item=>item.label)
        :[];

      columns = [{
        title: '序号',
        dataIndex: 'index',
        render: (text, row, index)=> (
          <span>{index+1}</span>
        ),
      }, {
        title: '设备编号',
        dataIndex: 'devCode',
      }, {
        title: '设备名称',
        dataIndex: 'devName',
      }, {
        title: '区域',
        dataIndex: 'districtName',
      },{
        title: '点位',
        dataIndex: 'pointName',
        render: (text, row, index)=> (
          <span>{text}{row.signLongitude && row.signLatitude ? <img onClick={()=>this.handleShowMap({longitude:row.signLongitude, latitude:row.signLatitude, pointName:text})} style={{height:16,marginLeft:10,cursor:'pointer'}} src={d1}></img> : ''}</span>
        ),
      },{
        title: '养护时间',
        dataIndex: 'signTime',
        render: text => text ? moment(text).format("YYYY-MM-DD HH:mm") : '--'
      },{
        title: '养护反馈',
        dataIndex: 'signCon',
        // render: (text)=> (
        //   <span>{taskStatus[parseInt(text)-1]}</span>
        // ),
      }];

    }









    return (
      <div>
        <Table
          columns={columns}
          dataSource={tableData ? tableData : []}
          rowSelection={onlyview ? null : rowSelection}
          pagination={false}
          loading={loading}
          scroll={{x:700}}
          size={"small"}
          rowKey={"devId"}
        />
        <Drawer
          width={800}
          placement="right"
          closable={false}
          onClose={this.handleHideMap}
          visible={mapVisible}
          style={{padding:0}}
        >
          <div style={{height:'100vh'}}>
            {mapVisible && <Map mapData={locationData}/>}
          </div>
        </Drawer>

      </div>


    );
  }
}
